<!--
3D导航栏
    - 唯一需要注意的是：旋转轴是立方体中心
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul {
    margin: 100px;
  }
  ul li {
    float: left;
    width: 120px;
    height: 35px;
    margin: 0 10px;
    list-style: none;
    /* 透视：给大盒子的父级是最好的 */
    perspective: 400px;
  }
  .box {
    position: relative;
    width: 100%;
    height: 100%;
    /* 立体环境、过渡 */
    /* perspective: 400px; */
    transform-style: preserve-3d;
    transition: all 1s;
  }
  .box:hover {
    /* 大盒子旋转 */
    transform: rotateX(90deg);
  }
  .up,
  .down {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 35px;
    text-align: center;
  }
  /* 根据【立体中心】旋转才是最好的效果，需要上盒子【往z移动】、下盒子【往前倾倒、往y移动】 */
  .up {
    z-index: 1;
    background-color: red;
    transform: translateZ(17.5px);
  }
  .down {
    background-color: orange;
    /* 多个转换效果共存时，位移写在最前面，这种效果才是我们需要的，后面讲的旋转木马属于特殊情况 */
    transform: translateY(17.5px) rotateX(-90deg);
  }
</style>

<ul>
  <li>
    <div class="box">
      <div class="up">hello</div>
      <div class="down">word</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="up">hello</div>
      <div class="down">word</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="up">hello</div>
      <div class="down">word</div>
    </div>
  </li>
</ul>
